<template>
  <div>
    <el-dialog
      :title="movie.vod_name"
      :visible.sync="dialogTableVisible"
      width="500px"
      :close-on-click-modal="false"
      @close="clearData()"
    >
      <div>
        <div style="float: right">
          <el-link type="primary" style="margin: 0px 10px" @click="playMovie" :disabled="disabled">在线观看</el-link>
          <el-link type="success" :href="downLoadUrl" :disabled="disabled">点击下载</el-link>
        </div>
        <div class="mainBody">
          <div>主演：{{ movieData.vod_actor }}</div>
          <div>年份：{{ movieData.vod_year }}</div>
          <div>语言: {{ movieData.vod_lang }}</div>
          <el-image
            style="width: 300px; height: 300px"
            :src="movieData.vod_pic"
            :fit="'fill'"
          >
          </el-image>
          <div
            v-html="movieData.vod_content"
            style="width: 300px; margin-top: 6px"
          >
            {{ movieData.vod_content }}
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="movie.vod_name"
      :visible.sync="showMovie"
      width="500px"
      :close-on-click-modal="false"
      @close="clearData2()"
    >
      <iframe id="player" :src="playUrl" frameborder="0" v-if="showMovie" allowfullscreen="true" style="width:100%;height:250px"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { getMovieDetailByID } from "@/api/movie";
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
export default {
  name: "DetailDialog",
  components: {
    videoPlayer,
  },
  data() {
    return {
      dialogTableVisible: false,
      movie: "",
      movieData: "",
      playUrl: "",
      downLoadUrl: "",
      showMovie: false,
      iframeHtml: '',
      disabled: true
    };
  },
  methods: {
    init(data) {
      this.movieData = "";
      this.playUrl = "";
      this.downLoadUrl = "";
      this.showMovie = false;
      this.disabled = true
      this.movie = data;
      this.iframeHtml = '<iframe id="player" :src="playUrl" frameborder="0" v-if="showMovie" allowfullscreen="true" style="width:100%;height:250px"></iframe>'
      this.dialogTableVisible = true;
      getMovieDetailByID(data.vod_id)
        .then((res) => {
          this.movieData = res.list[0];
          this.downLoadUrl = this.movieData.vod_down_url.split("$")[1];
          this.disabled = false
        })
        .catch((err) => {
          this.movieHtml = "<span>信息获取失败</span>";
        });
    },
    playMovie() {
      this.dialogTableVisible = false
      this.showMovie = true;
      this.playUrl = this.movieData.vod_play_url.split("$")[1];
    },
    clearData() {
      this.movieData = "";
      this.downLoadUrl = "";
      this.dialogTableVisible = false;
    },

    clearData2() {
      let box = document.getElementById('player')
      if(box){
        box.remove()
      }
      this.playUrl = ""
      this.showMovie = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.mainBody {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>


